<template>
	<div style="background-color: #FFFFFF;" id="devMainDiv">
		<div class="yunui-main-navbar" style="text-align: center;">
			<div style="position: absolute;left: 20px;top:12px;font-size: 18px;">
				{{title}}
			</div>
			<MainSearchBox :menu="menu" @searchSelected="onSearchSelectedHandler"></MainSearchBox>
			<div style="position: absolute;right: 20px;top:7px;display: flex;flex-direction:row;">
				<img :src="avatarUrl" style="width: 32px;height: 32px;border-radius:50%;" />
				<el-dropdown @command="handleCommand" style="margin-top: 7px;margin-left:10px;" size="medium">
					<span class="el-dropdown-link" style="color: white;">
						{{username}}<i class="el-icon-caret-bottom"></i>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="changepassword">改变密码</el-dropdown-item>
							<el-dropdown-item command="exit">退出</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<div id="devMainContent" class="yunui-content">
			<MainSliderBar :itemList="moduleItemList" @itemClick="onItemClickHandler"></MainSliderBar>
			<RecentList :moduleName="moduleName" :recentList="recentList" :moduleValue="moduleValue" @itemClick="onRecentListClickHandler">
			</RecentList>
			<MainPageContainer ref="mainPageContainer"></MainPageContainer>
		</div>
		<el-dialog v-model="changePasswordVisible">
			<el-row>
				<el-col :span="8">旧密码</el-col>
				<el-col :span="16">
					<el-input size="mini" v-model="oldPassword" type="password">
					</el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="8">新密码</el-col>
				<el-col :span="16">
					<el-input size="mini" v-model="newPassword" type="password">
					</el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="8">重复新密码</el-col>
				<el-col :span="16">
					<el-input size="mini" v-model="newPassword2" type="password">
					</el-input>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onChangePasswordOkHandler">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import MainSearchBox from '@/views/page/components/MainSearchBox.vue';
	import MainSliderBar from '@/views/page/components/MainSliderBar.vue';
	import RecentList from './RecentList.vue';
	import MainPageContainer from '@/views/page/components/MainPageContainer.vue';
	import $ from "jquery";
	import constants from '@/utils/constants.js';
	import router from '@/router';
	import modelImage from '@/assets/module_model.png';
	import pageImage from '@/assets/module_page.png';
	import reportImage from '@/assets/module_report.png';
	import workflowImage from '@/assets/module_workflow.png';
	import appImage from '@/assets/module_app.png';
	import homeImage from '@/assets/module_home.png';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: 'WebIDE',
		components: {
			MainSearchBox,
			MainSliderBar,
			RecentList,
			MainPageContainer
		},
		data() {
			return {
				moduleItemList: [{
						"name": "首页",
						"value": "home",
						"selected": true,
						icon: homeImage
					},
					{
						"name": "模型",
						"value": "model",
						icon: modelImage
					},
					{
						"name": "页面",
						"value": "page",
						icon: pageImage
					},
					{
						"name": "报表",
						"value": "report",
						icon: reportImage
					},
					{
						"name": "工作流",
						"value": "workflow",
						icon: workflowImage
					},
					{
						"name": "应用",
						"value": "application",
						icon: appImage
					},
				],
				recentList: [],
				username: "",
				avatarUrl: constants.ROOT_URL + "main/getAvatar?X-Token=" + window.localStorage.getItem("token"),
				changePasswordVisible: false,
				oldPassword: "",
				newPassword: "",
				newPassword2: "",
				moduleName: "模型",
				moduleValue: "model",
				shortcutMenuList: [
					{
						"name": "字典",
						"value": "ir_dict_listview"
					},
					{
						"name": "模型访问",
						"value": "ir_model_access_listview"
					},
					{
						"name": "菜单",
						"value": "ir_menu_treeview"
					},
					{
						"name": "移动端菜单",
						"value": "ir_mobile_menu_treeview"
					},
					{
						"name": "报表查询",
						"value": "ir_report_query_listview"
					},
					{
						"name": "清除缓存",
						"value": "cache_reset_page_view"
					},
					{
						"name": "角色",
						"value": "res_role_listview"
					},
					{
						"name": "用户",
						"value": "res_user_listview"
					}
				],
				title:"",
			}
		},
		mounted() {
			window.document.title = constants.TITLE;
			this.title=constants.TITLE;
			this.$store.state.webIDE = this;
			var that = this;
			this.axios.interceptors.response.use(function(response) {
				if (response.status === 200) {
					if (response.data.code == 2) {
						that.$router.push("loginpage");
					}
					return Promise.resolve(response);
				} else {
					return Promise.reject(response);
				}
			});
			this.axios.defaults.headers.common['X-Token'] = window.localStorage.getItem("token");
			$("#devMainDiv").height($(window).height());
			$("#devMainContent").height($(window).height() - 48);
			this.init();
		},
		methods: {
			init() {
				var that = this;
				restUtil.getAction(this,"webide/init").then(
					function(response) {
						if (response.data.code == 1) {
							that.username = response.data.username;
							that.onItemClickHandler(0);
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onItemClickHandler(index) {
				var moduleItem = this.moduleItemList[index];
				this.moduleName = moduleItem.name;
				this.moduleValue = moduleItem.value;
				if (moduleItem.value == "model") {
					this.loadModelPage();
				} else if (moduleItem.value == "page") {
					this.loadPagePage();
				} else if (moduleItem.value == "report") {
					this.loadReportPage();
				} else if (moduleItem.value == "workflow") {
					this.loadWorkflowPage();
				} else if (moduleItem.value == "application") {
					this.loadApplicationPage();
				} else if (moduleItem.value == "home") {
					this.loadHomePage();
				}
			},
			loadHomePage() {
				this.recentList = this.shortcutMenuList;
				this.$refs.mainPageContainer.loadPage({
					"name": "首页",
					"menuType": "serverpage",
					"pageCode": "home_dashboard"
				});
			},
			loadModelPage() {
				var that = this;
				restUtil.getAction(this,"webide/getRecentModelList").then(
					function(response) {
						if (response.data.code == 1) {
							that.recentList = response.data.recentModelList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
				this.$refs.mainPageContainer.loadPage({
					"name": "所有模型",
					"menuType": "clientpage",
					"pageCode": "model-list-page"
				});
			},
			loadPagePage() {
				var that = this;
				restUtil.getAction(this,"webide/getRecentPageList").then(
					function(response) {
						if (response.data.code == 1) {
							that.recentList = response.data.recentPageList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
				this.$refs.mainPageContainer.loadPage({
					"name": "所有页面",
					"menuType": "clientpage",
					"pageCode": "page-list-page"
				});
			},
			loadReportPage() {
				var that = this;
				restUtil.getAction(this,"webide/getRecentReportList").then(
					function(response) {
						if (response.data.code == 1) {
							that.recentList = response.data.recentReportList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
				this.$refs.mainPageContainer.loadPage({
					"name": "所有报表",
					"menuType": "clientpage",
					"pageCode": "report-list-page"
				});
			},
			loadWorkflowPage() {
				var that = this;
				restUtil.getAction(this,"webide/getRecentWorkflowList").then(
					function(response) {
						if (response.data.code == 1) {
							that.recentList = response.data.recentWorkflowList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
				this.$refs.mainPageContainer.loadPage({
					"name": "所有工作流",
					"menuType": "clientpage",
					"pageCode": "workflow-list-page"
				});
			},
			loadApplicationPage() {
				var that = this;
				restUtil.getAction(this, "webide/getRecentApplicationList").then(
					function(response) {
						if (response.data.code == 1) {
							that.recentList = response.data.recentApplicationList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
				this.$refs.mainPageContainer.loadPage({
					"name": "所有应用",
					"menuType": "clientpage",
					"pageCode": "application-page"
				});
			},
			handleCommand(command) {
				var that=this;
				if (command == "exit") {
					this.$confirm("确定退出吗?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						restUtil.postAction(this,"main/logout").then(
							function(response) {
								if (response.data.code == 1) {
									window.localStorage.removeItem("token");
									router.push("/");
								} else {
									that.$alert(response.data.message, '提示');
								}
							});
					}).catch(() => {

					});
				} else if (command == "changepassword") {
					this.changePasswordVisible = true;
				}
			},
			onSearchSelectedHandler(item) {
				this.onMenuItemClickHandler(item);
			},
			onChangePasswordOkHandler() {
				var that = this;
				restUtil.postAction(this,"main/changePassword?oldPassword=" + this.oldPassword +
					"&newPassword=" + this.newPassword + "&newPassword2=" + this.newPassword2).then(
					function(response) {
						if (response.data.code == 1) {
							that.$alert("修改成功", '提示');
							that.changePasswordVisible = false;
						} else {
							that.$alert(response.data.message, '提示');
						}
					});
			},
			onRecentListClickHandler(item) {
				if (this.moduleValue == "model") {
					this.$refs.mainPageContainer.loadPage({
						"name": item.name,
						"menuType": "clientpage",
						"pageCode": "model-form-page"
					}, {
						tableName: item.tableName
					});
				} else if (this.moduleValue == "page") {
					var pageCode;
					if (item.device == "mobile") {
						pageCode = "m-form-designer";
					} else {
						pageCode = "form-designer";
					}
					this.$refs.mainPageContainer.loadPage({
						"name": item.name,
						"menuType": "clientpage",
						"pageCode": pageCode
					}, {
						pageCode: item.pageCode
					});
				} else if (this.moduleValue == "report") {
					if (item.reportType == "detailReport") {
						this.$store.state.webIDE.$refs.mainPageContainer.loadPage({
							"name": item.name,
							"menuType": "clientpage",
							"pageCode": "detail-report-designer"
						}, {
							code: item.code
						});
					} else if (item.reportType == "summaryReport") {
						this.$store.state.webIDE.$refs.mainPageContainer.loadPage({
							"name": item.name,
							"menuType": "clientpage",
							"pageCode": "summary-report-designer"
						}, {
							code: item.code
						});
					}else {
						window.open(constants.ROOT_URL + "ureport/designer?_u=db:" + item.code);
					}
				} else if (this.moduleValue == "workflow") {
					this.$refs.mainPageContainer.loadPage({
						"name": item.name,
						"menuType": "clientpage",
						"pageCode": "workflow-designer"
					}, {
						code: item.code
					});
				} else if (this.moduleValue == "home") {
					var that = this;
					restUtil.getAction(this,"webide/getPageCodeByMenuCode?menuCode=" + item.value).then(
						function(response) {
							if (response.data.code == 1) {
								that.$refs.mainPageContainer.loadPage({
									"name": item.name,
									"menuType": response.data.menuType,
									"pageCode": response.data.pageCode
								});
							} else {
								that.$alert(response.data.message, '提示')
							}
						});
				}
			}
		},
	}
</script>

<style>
	
</style>
